import React, { Component } from 'react';
import MyNavBar from '../../components/MyNavBar'
import styles from './index.module.scss'
import { getCurrentCity } from '../../utils/city.js'
import { Toast } from 'antd-mobile';
import HouseItem from '../../components/HouseItem'
import classNames from 'classnames'

const BMap = window.BMap
// 圆形覆盖物的样式：
const labelStyle = {
    cursor: "pointer",
    border: "0px solid rgb(255, 0, 0)",
    padding: "0px",
    whiteSpace: "nowrap",
    fontSize: "12px",
    color: "rgb(255, 255, 255)",
    textAlign: "center"
};
class Map extends Component {
    constructor() {
        super()
        this.state = {
            isShowHouseList: false, //是否显示房屋列表
            houseList: ''
        }
    }
    async componentDidMount() {
        const { value, label } = await getCurrentCity()
        this.value = value
        this.label = label
        console.log(this);
        this.initMap()
    }
    // 初始化地图
    initMap = () => {
        // 创建地图实例
        this.map = new BMap.Map("container");
        // get地图添加一个触摸事件
        this.map.addEventListener('touchstart', () => {
            this.setState({
                isShowHouseList: false
            })
        })
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 降地址解析结果显示地图上,并调整地图实业
        myGeo.getPoint(
            this.label,
            (point) => {
                if (point) {
                    console.log(point);
                    // 第二个参数代表缩放级别 值越大范围越小 越精确
                    this.map.centerAndZoom(point, 11);
                    this.renderOverlays(this.value)
                }
            },
            this.label
        )
    }
    // 渲染覆盖物
    renderOverlays = async (id) => {
        console.log(id, "id==========")
        Toast.loading("数据加载中", 1);
        const res = await this.axios.get(`/area/map?id=${id}`)
        console.log(res, "++++++")
        Toast.hide()
        // 获取需要渲染的遮罩物类型
        const { type, nextZoom } = this.getOverlaysTypeAndZoom()
        console.log(type, "type=======")
        console.log(nextZoom, "type=======")
        // 根据缩放级别进行渲染
        res.data.body.forEach(item => {
            if (type === 'circle') {
                this.renderCircleOverlays(item, nextZoom)
            } else {
                this.renderSquareOverlays(item)
            }
        })
    }
    // 渲染圆形遮罩物
    renderCircleOverlays = (item, nextZoom) => {
        const { label: name, count, value, coord: { latitude, longitude } } = item
        console.log(name, "name")
        // 创建覆盖物的point(经纬度不要写反了  !!注意)
        var point = new BMap.Point(longitude, latitude);
        console.log(point, "point-----")
        let opts = {
            position: point, // 指令文本标注所在在位置
            offset: new BMap.Size(-35, 35) //设置文本偏移量
        }
        var label = new BMap.Label("", opts); // 创建文本标注对象
        label.setContent(`
            <div class=${styles.bubble}>
                <p class=${styles.name}>${name}</p>
                <p class=${styles.name}>${count}</p>
            </div>
        `)
        label.setStyle(labelStyle)
        // 给覆盖物添加点击事件
        label.addEventListener('click', () => {
            // 干掉一级覆盖物
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0);

            // 把地图移动到所点击区域的位置，并且地图缩放级别变成13、15
            this.map.centerAndZoom(point, nextZoom);

            // 调用renderOverlays，来渲染第二级覆盖物
            this.renderOverlays(value)
        })
        // 把它添加到地图上
        this.map.addOverlay(label)
    }
    // 渲染方形遮罩物
    renderSquareOverlays = (item) => {
        const { label: name, count, value, coord: { latitude, longitude } } = item
        // 获取覆盖物的point(经纬度不要写反了 !!注意)
        var point = new BMap.Point(longitude, latitude);
        let opts = {
            position: point, //指令文本标注所在位置
            offset: new BMap.Size(-35, 35) // 设置文本偏移量
        }
        var label = new BMap.Label("", opts) //设置文本标注对象
        label.setContent(`
            <div class=${styles.rect}>
                <span class=${styles.housename}>${name}</span>
                <span class=${styles.housenum}>${count}</span>
                <i class=${styles.arrow}></i>
            </div>
        `)
        label.setStyle(labelStyle)
        // 给覆盖物添加点击事件
        label.addEventListener('click', (e) => {
            console.log(e.changedTouches, "e.changedTouches")
            // 获取手指的位置
            if (e.changedTouches.length > 0) {
                const { clientX, clientY } = e.changedTouches[0]
                const moveX = window.screen.width / 2 - clientX
                const moveY = window.screen.height / 2 - clientY - 330 / 2
                // 让地图尽量处于可视区域的中间
                this.map.panBy(moveX, moveY)
            }
            this.getHouseList(value)
            this.setState({
                isShowHouseList: true
            })
        })
        this.map.addOverlay(label)
    }
    // 获取房屋列表
    getHouseList = async (id) => {
        let res = await this.axios.get(`/houses?cityId=${id}`)
        console.log(res, "res=======")
        this.setState({
            houseList: res.data.body.list
        })
    }
    // 渲染小区的房屋列表
    renderHouseList = () => {
        const { isShowHouseList, houseList } = this.state
        return (<div className={classNames(styles.houseList, { [styles.show]: isShowHouseList })}>
            {/* 标题部分 */}
            <div className={styles.titleWrap}>
                <h1 className={styles.listTitle}>房屋列表</h1>
                <a className={styles.titleMore} href="">更多房源</a>
            </div>
            <div className={styles.houseItems}>
                {houseList && houseList.map(item => {
                    return <HouseItem key={item.houseCode} {...item} />
                })}
            </div>
        </div>
        )
    }
    /*
    * 获取覆盖物要渲染的样子 (方形还是圆形)
    * 并且获取下面以及的缩放级别
    */
    getOverlaysTypeAndZoom = () => {
        //    获取地图缩放级别
        const zoom = this.map.getZoom();
        let type; //这个代表渲染的是一二级覆盖物的圆形覆盖物
        let nextZoom; //点击某个覆盖物之后,下一级地图覆盖物显示的时候, 地图应该缩放多少

        if (zoom > 10 && zoom <= 12) {
            type = "circle"
            nextZoom = 13
        } else if (zoom > 12 && zoom <= 14) {
            type = "circle"
            nextZoom = 15
        } else if (zoom > 14) {
            type = "rect"
        }
        return { type, nextZoom }
    }
    render() {
        return (
            <div className={styles.map}>
                <MyNavBar title="地图找房" />
                <div id="container"></div>
                {this.renderHouseList()}
            </div>
        );
    }
}

export default Map;